<template>
	<view class="steam-page">
		<navigation :navigationMsg="navigationMsg"></navigation>
		<view class="main">
			<view class="steam-item" v-for="(item,index) in steamList" :key="index" @click="edidSteamItem(item,index)">
				<view class="steam-msg">
					<view class="avatar"></view>
					<view class="link">{{item.link}}</view>
					<view class="default" v-if="index==0">(当前账号)</view>
				</view>
				<view class="right-icon"></view>
			</view>
		</view>
		<view class="add-steam" @click="openAddSteam">
			添加Steam账号
		</view>
		<u-popup :show="steamShow" mode="center" @close="steamClose" @open="steamOpen" :round="10"
			closeIconPos="top-right" :closeable='true'>
			<view class="steam-box" v-if="changesteamBox==0">
				<view class="title">
					添加steam账号
				</view>
				<u--input class="steam-input" placeholder="请输入steam账号" border="surround"
					v-model="steamInputText"></u--input>
				<view class="btn-box">
					<view class="close" @click="closeSteamBox">
						取消
					</view>
					<view class="submit" @click="addSteam">
						确认
					</view>
				</view>
			</view>
			<view class="steam-box" v-if="changesteamBox==1">
				<view class="title">
					编辑steam账号
				</view>
				<u--input class="steam-input" placeholder="请输入steam账号" border="surround"
					v-model="editSteamInputText"></u--input>
				<view class="btn-box">
					<view class="close" style="backgroundColor:#F56C6C;" @click="delSteam">
						删除
					</view>
					<view class="submit" @click="editSteam">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	import navigation from '../../../components/navigation.vue';
	export default {
		data() {
			return {
				changesteamBox: 0,
				navigationMsg: {
					title: "我的Steam"
				},
				steamShow: false,
				//添加输入框
				steamInputText: "",
				//编辑输入框
				editSteamInputText: "",
				//编辑id
				editSteamId: -1,
				steamList: [],
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		components: {
			navigation
		},
		onShow() {
			this.getSteam()
			this.getSetting()
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {
					document.documentElement.style.setProperty('--bg-color', res.theme_color);
					document.documentElement.style.setProperty('--text-color', res.font_color);
				}).catch(err => {
					console.log(err);
				})
			},
			//获取steam
			getSteam() {
				http.post('/api/account/getSteamLink').then(res => {
					this.steamList = res
				}).catch(err => {})
			},
			steamOpen() {
				this.steamShow = true
			},
			steamClose() {
				this.steamShow = false
			},
			//打开添加steam弹窗
			openAddSteam() {
				this.changesteamBox = 0
				this.steamOpen()
			},
			//取消
			closeSteamBox() {
				this.steamClose()
			},
			//
			//添加steam
			addSteam() {
				http.post('/api/account/addSteamLink', {
					link: this.steamInputText
				}).then(res => {
					if (this.steamInputText == "") {
						uni.showToast({
							title: "请输入steam账号",
							icon: "none",
							duration: 1500,
						})
					} else {
						this.steamClose()
						uni.showToast({
							title: "添加成功",
							icon: "none",
							duration: 1500,
						})
						location.reload()
					}
				}).catch(err => {

				})
			},
			//打开编辑steam弹窗
			edidSteamItem(item, index) {
				this.changesteamBox = 1
				this.editSteamInputText = item.link
				this.editSteamId = item.id
				this.steamOpen()
			},
			//编辑steam
			editSteam() {
				http.post('/api/account/editSteamLink', {
					id: this.editSteamId,
					link: this.editSteamInputText
				}).then(res => {
					this.steamClose()
					location.reload()
				}).catch(err => {})
			},
			//删除
			delSteam() {
				http.post('/api/account/delSteamLink', {
					id: this.editSteamId,
				}).then(res => {
					this.steamClose()
					location.reload()
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.steam-page {
		width: 100%;
		height: 100vh;
		background-color: var(--bg-color);

		.main {
			width: 100%;
			height: calc(100% - 250rpx);
			overflow-y: scroll;

			.steam-item {
				width: 100%;
				height: 120rpx;
				background-color: var(--bg-color);
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: var(--text-color);

				.steam-msg {
					width: calc(100% - 50rpx);
					height: 100%;
					display: flex;
					align-items: center;

					.avatar {
						min-width: 90rpx;
						height: 90rpx;
						background-color: black;
						border-radius: 50%;
						margin-left: 20rpx;
					}

					.link {
						width: 410rpx;
						height: 100%;
						word-break: break-all;
						display: flex;
						align-items: center;
						margin-left: 20rpx;
						font-size: 34rpx;
						overflow: scroll;
					}

					.default {
						min-width: 150rpx;
						text-align: center;
						line-height: 120rpx;
						height: 100%;
						font-size: 28rpx;
						color: aqua;
					}
				}

				.right-icon {
					width: 50rpx;
					height: 50rpx;
					background-image: url("../../../static/rightArrow_black.svg");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					margin-right: 20rpx;
				}
			}
		}

		.add-steam {
			width: 90%;
			height: 100rpx;
			background-color: black;
			color: white;
			text-align: center;
			line-height: 100rpx;
			border-radius: 20rpx;
			margin: auto;
		}

		.steam-box {
			width: 500rpx;
			height: 400rpx;
			background-color: white;
			border-radius: 30rpx;

			.title {
				width: 100%;
				text-align: center;
				margin-top: 30rpx;
				font-size: 36rpx;
				font-weight: bold;
			}

			.steam-input {
				width: 80%;
				margin: auto;
				margin-top: 70rpx;
			}

			.btn-box {
				width: 100%;
				height: 100rpx;
				margin-top: 60rpx;
				display: flex;
				justify-content: space-between;

				>view {
					width: 180rpx;
					height: 80rpx;
					border-radius: 20rpx;
					text-align: center;
					line-height: 80rpx;
					color: white;
				}

				.close {
					background-color: #ccc;
					margin-left: 30rpx;
				}

				.submit {
					background-color: black;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>